
/**
 * Created by Dalyn on 2017/2/28.
 */
import React from "react";
import { hashHistory } from 'react-router';
import Confirm from "../../common/Confirm";
import "./Peoplemanage.css";
import { Alert } from 'antd';
import { Modal } from 'antd';
import Relay from "react-relay";
import People_item from "./People_item"
import './Peoplemanage.css'
import Addpeople from './Addpeople'
import Edituserinfo from './Edituserinfo'

/*删除弹框*/
class Delete extends React.Component{
    constructor(props){
        super(props);
        this.state={
            delete:false,
            roid:'',
            enid:''
        }
        this.style={
            alert:{
                width:"300px",
                height:"160px",
                margin:"0 auto"
            }
        }
    }
    handleOk = (e) => {
        console.log(this.state.roid)
        if(this.state.roid==1){
            alert('超级管理员不可删除');
            this.setState({
                delete: false,
            });
            return;
        }
        Relay.Store.commitUpdate(
            new DeleteRoleMutation({
                rid:this.state.roid
            }),
            {
                onFailure: () => {
                },
                onSuccess: (response) => {
                    console.log(response)
                    this.props.getpersion();
                }
            }
        )
        this.setState({
            delete: false,
        });
    }
    handleCancel = (e) => {
        this.setState({
            delete: false,
        });
    }
    render(){
        return (
            <Modal id="delete" visible={this.state.delete} onCancel={this.handleCancel} style={{width:"440px",height:"270px",display:"block"}}>
                <Alert message="确定删除此角色么？&nbsp;    删除后所有相关信件将丢失" banner  style={this.style.alert}/>
                <span className="limit_duty_cancel" onClick={this.handleCancel}>取消</span>
                <span className="limit_duty_ok" onClick={this.handleOk}>确定</span>
            </Modal>
        )
    }
}
/*编辑组件*/
class Edit extends React.Component{
    constructor(props){
        super(props);
        this.state={
            edit:false
        }
        this.style={

        }
    }
    handleOk = (e) => {
        this.setState({
            edit: false,
            pnum:0
        });
    }
    handleCancel = (e) => {
        this.setState({
            edit: false,
        });
    }
    render(){
        return (
            <Modal visible={this.state.edit} onCancel={this.handleCancel} style={{width:"440px",height:"270px",display:"block"}}>
                <span className="limit_duty_tp">财务{this.state.pnum}人</span>
                <textarea style={{rows:5,width:360,height:115,resize:"none",outline:"none",marginTop:30,marginLeft:30,padding:10}}/>
                <span className="limit_duty_cancel" onClick={this.handleCancel}>取消</span>
                <span className="limit_duty_ok" onClick={this.handleOk}>确定</span>
            </Modal>
        )
    }
}

/*导出组件*/
export default class PeopleManage extends React.Component{
    constructor(props){
        super(props);
        this.style={
            confirm:{
                width: '96px',
                height: '27px',
                backgroundColor: "#fa6d63",
                fontSize: "16px",
                color: "#fff",
                fontFamily: "Microsoft YaHei",
                borderRadius:"3px"
            }
        };
        this.state={
            arrgroup:[]
        }
        this.group = {};
    }

    componentWillMount(){
        this.getpersion();
        this.setState({
            arrgroup:[{
                roleId:'1111',
                name:'名字',
                phone:'1132132323',
                role:'管理员',
                status:'已开通'
            },{
                roleId:'1111',
                name:'名字',
                phone:'1132132323',
                role:'管理员',
                status:'已开通'
            }]
        })
    }

    getpersion(){
        // Relay.Store.commitUpdate(
        //     new FindRoleListMutation({
        //
        //     }),
        //     {
        //         onFailure: () => {
        //
        //         },
        //         onSuccess: (response) => {
        //             //console.log(response)
        //             let errorcode = response.findRoleList.findRoleList.errorCode
        //             //console.log(errorcode)
        //             if(errorcode==0){
        //                 this.arrgroup = response.findRoleList.findRoleList.roleModelList
        //                 this.setState({
        //                     arrgroup:this.arrgroup
        //                 })
        //             }
        //         }
        //     }
        // )
    }


    /*编辑*/
    edit(){
        this.refs.editpeople.setState({
            visible:true
        })
    }
    /*删除*/
    deletz(rid){
        this.refs.delete.setState({
            delete:true,
            roid:rid
        })
    }

    /*员工列表*/
    addList(){
        return this.state.arrgroup.map((item,index)=>{
            return(
                <People_item item={item} index={index} key={index+'limititem'} edit={this.edit.bind(this)} deletz={this.deletz.bind(this)}/>
            );
        })

    }
    /*新增职务*/
    addDuty(){
        hashHistory.push('/editLimit')
    }
    addPeople(){
        this.refs.newpeople.setState({
            visible:true
        })
    }
    render(){
        return (
            <div className="limit clear">
                <div className="limit_duty_box">
                    <div className="newPeople">
                        <Confirm style={this.style.confirm} tcontext={'新增人员'} touch={this.addPeople.bind(this)}/>
                    </div>
                    <ul className="limit_duty_ul">
                        <li className="limit_duty_th">
                            <span className="limit_duty_t1 limit_duty_bor">用户ID</span>
                            <span className="limit_duty_t2 limit_duty_bor">用户名</span>
                            <span className="limit_duty_t3 limit_duty_bor">手机号</span>
                            <span className="limit_duty_t4 limit_duty_bor">角色</span>
                            <span className="limit_duty_t5 limit_duty_bor">状态</span>
                            <span className="limit_duty_t6 limit_duty_bor">操作</span>
                        </li>
                        {
                            this.addList()
                        }
                    </ul>
                </div>
                <Addpeople ref={'newpeople'}></Addpeople>
                <Edituserinfo ref={'editpeople'}></Edituserinfo>
                <Delete ref={"delete"} getpersion={this.getpersion.bind(this)}/>
                <Edit ref={"edit"}/>
            </div>
        )
    }
}